<template>
  <div class="authorization">
    <p class="p1">登录后小程序将会获得以下权限</p>
    <div class="aline"></div>
    <p class="p2">• 获得你的公开信息（昵称、头像等）</p>
    <p class="p2">• 拒绝授权将返回小程序首页，您可以继续浏览首页内容</p>
    <div class="buttons">
      <button class="refuse" @click="jumpToHome">拒绝授权</button>
      <button class="allow" open-type="getUserInfo" @getuserinfo="getUserInfo">授权登录</button>
    </div>
  </div>
</template>
<script>
import { getToken } from "@/api/api";
import { toast } from "@/utils/index";
import { throttle } from "@/utils/util";
export default {
  data() {
    return {
      button: true //授权能否点击
    };
  },
  methods: {
    getUserInfo(e) {
      let _this = this;
      let userInfo = e.target ? e.target.userInfo : null;
      console.log("用户信息", e);
      if (!userInfo) {
        wx.showToast({
          title: "拒绝授权，将无法使用本小程序全部功能，请重新获取授权！",
          icon: "none",
          mask: true,
          duration: 2500
        });
        return;
      }
      wx.login({
        success(resLogin) {
          if (resLogin.code) {
            console.log("resLogin", resLogin);
            const data = {
              code: resLogin.code,
              userInfo: userInfo
            };
            let url = "/" + _this.$root.$mp.appOptions.path + "?";
            let options = _this.$root.$mp.appOptions.query;
            for (var key in options) {
              var value = options[key];
              url += key + "=" + value + "&";
            }
            wx.showLoading({ title: "加载中", mask: "true" });
            console.log("授权成功");
            wx.setStorageSync("skipUrl", url);
            _this.tol(data);
          }
        }
      });
    },
    /**
     * 节流函数一下
     */
    tol: throttle(
      function(data) {
        this.getToken(data);
      },
      3000,
      {
        leading: true,
        trailing: false
      }
    ),
    /**
     * 获得token
     */
    getToken(data) {
      let that = this;
      this.button = false;
      getToken(data).then(res => {
        if (res && res.data.code == 0) {
          this.button = false;
          let data = res.data;
          wx.setStorageSync("token", data.token);
          wx.setStorageSync("userInfo", data.userInfo);
          wx.hideLoading();
          let url = wx.getStorageSync("skipUrl");
          let backUrl = wx.getStorageSync("backUrl");
          if (backUrl) {
            if (backUrl == "/pages/home/main") {
              wx.switchTab({ url: backUrl });
            } else {
              wx.navigateTo({ url: backUrl });
            }
            return;
          } else {
            if (url) {
              wx.reLaunch({ url: url });
            }
          }
        } else {
          this.button = true;
        }
      });
    },
    jumpToHome() {
      wx.switchTab({ url: "/pages/home/main" });
    }
  }
};
</script>
<style lang='less'>
.authorization {
  width: 100%;
  border-top: 1rpx #f4f4f4 solid;
  padding-top: 200rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  .p1 {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 40rpx;
    font-weight: 400;
  }
  .p2 {
    font-size: 26rpx;
    color: #999;
    margin-bottom: 40rpx;
  }
  .p3 {
    font-size: 26rpx;
    color: #999;
    margin-bottom: 108rpx;
  }
  .buttons {
    display: flex;
    flex-direction: row;
    button {
      width: 230rpx;
      height: 88rpx;
      color: #fff;
      font-size: 32rpx;
      border-radius: 44rpx;
      text-align: center;
      line-height: 88rpx;
      font-weight: 500;
      margin: auto 30rpx;
    }
    .allow {
      margin-top: 20rpx;
      background: linear-gradient(
        90deg,
        rgb(62, 170, 220) 0%,
        rgba(6, 109, 185, 1) 100%
      );
    }
    .refuse {
      margin-top: 20rpx;
      background: linear-gradient(
        90deg,
        rgb(152, 155, 156) 0%,
        rgb(92, 100, 105) 100%
      );
    }
  }
}
</style>